import React, {Component} from 'react'
import {Button, Col, Row} from 'antd'
import '../../less/top.less'
import student1 from '../../images/student1.png'
import student2 from '../../images/student2.png'
import student3 from '../../images/student3.png'
import isMobile from '../../constant/client-util'

class StudentInfoBox extends Component {
  render() {
    return <div className='box-padding gray-bg'>
      <Row type='flex' justify='center'>
        <h3 className='title'>面向对象
          <span className='title_underline'/></h3>
      </Row>
      <Row type="flex" justify="center" align="top">
        <div className='PC_box'>
          <Row gutter={20}>
            <Col sm={{span: 24}} lg={{span: 8}} style={{marginTop: '.2rem'}}>
              <img src={student1} alt='' style={{width: '100%'}}/>
              <div style={{
                height: '180px',
                backgroundColor: '#b11c54',
                textAlign: 'center',
                fontSize: '18px',
                color: 'white',
                paddingTop: isMobile() ? '10%' : '.1rem'
              }}>
                <b>学生A</b>
                <p style={{fontSize: '15px', margin: '.1rem'}}>如果你已在 IT 相关专业深耕许久<br/>仍渴望了解书本外的真实职场环境、<br/>探索更卓越的技术
                </p>
              </div>
            </Col>
            <Col sm={{span: 24}} lg={{span: 8}} style={{marginTop: '.2rem'}}>
              <img src={student2} alt='' style={{width: '100%'}}/>
              <div style={{
                height: '180px',
                backgroundColor: '#26bdcf',
                textAlign: 'center',
                fontSize: '18px',
                color: 'white',
                paddingTop: isMobile() ? '10%' : '.1rem'
              }}>
                <b>学生B</b>
                <p style={{fontSize: '15px', margin: '.10rem'}}>如果你是计算机专业的女生 <br/>可总有人告诉你 Tech Lady<br/>前途艰险发展渺茫</p>
              </div>
            </Col>
            <Col sm={{span: 24}} lg={{span: 8}} style={{marginTop: '.2rem'}}>
              <img src={student3} alt='' style={{width: '100%'}}/>
              <div style={{
                height: '180px',
                backgroundColor: '#1a73ba',
                textAlign: 'center',
                fontSize: '18px',
                color: 'white',
                paddingTop: '.1rem'
              }}>
                <b>学生C</b>
                <p style={{fontSize: '15px', margin: '.10rem'}}>如果你有非计算机专业的<br/>
                  开阔视野与缜密思维<br/>
                  却向往编程的筑梦之旅</p>
                <a href='https://school.thoughtworks.cn/learn/campus#study'
                   className='tws-4th-btn-selfStudy'>
                  <Button type="primary"
                          style={{color: 'white', border: '0', backgroundColor: '#2F2F2F'}}>开始自学</Button>
                </a>
              </div>
            </Col>
          </Row>
        </div>
      </Row>
      <Row type='flex' justify='center'>
        <div className='PC_box'>
          <p className='center'
             style={{fontSize: '20px', fontStyle: 'italic', fontWeight: 'lighter', marginTop: '20px'}}>
            ThoughtWorks challenges curious minds to make a real impact.</p>
        </div>
      </Row>
    </div>
  }
}

export default StudentInfoBox



